{% if user.admin %}
    {% extends 'admin_base.html' %}
{% else %}
    {% extends 'base.html' %}
    {% block carousel %}{% endblock %}
{% endif %}

{% block title %}
    {{ user.username }}的个人中心
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/personal_information.css') }}">
    <style>
        /* Custom Styles */
        ul.nav-tabs {
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }

        ul.nav-tabs li {
            margin: 0;
            border-top: 1px solid #ddd;
        }

        ul.nav-tabs li:first-child {
            border-top: none;
        }

        ul.nav-tabs li a {
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }

        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }

        ul.nav-tabs li:first-child a {
            border-radius: 4px 4px 0 0;
        }

        ul.nav-tabs li:last-child a {
            border-radius: 0 0 4px 4px;
        }

        ul.nav-tabs.affix {
            top: 30px; /* Set the top position of pinned element */
        }
    </style>
{% endblock %}

{% block main %}
    <div class="row">
        {% if not user.admin %}
            <div class="col-xs-3 pull-right" id="myScrollspy">
                <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                    <li class="active"><a href="#section-1">基本信息</a></li>
                    <li><a href="#section-4">我的收藏</a></li>
                    <li><a href="#section-2">收货地址</a></li>
                    <li><a href="#section-3">修改密码</a></li>
                </ul>
            </div>
        {% endif %}
        <div class="col-xs-9">
            <h3 class="title">{{ user.username }}的个人中心</h3>
            <div class="container" style="width: 100%;">
                <div style="margin-bottom: 50px">
                    <h4 id="section-1" class="title">基本信息</h4>
                    {{ render_form(form) }}
                </div>
                {% if not user.admin %}
                    <div style="margin-bottom: 50px">
                        <h4 id="section-4" class="title">我的收藏</h4>
                        {% for book in user.favorite_books %}
                            {% if loop.index0 % 4 == 0 %}
                                <div class="row show_modal">
                            {% endif %}
                        <div class="col-sm-6 col-md-3">
                            <a href="javascript:void(0);" data-toggle="modal" data-target="#modal-comment-book"
                               data-url="{{ url_for('book_detail_customer',book_id=book.id) }}"
                               class="thumbnail">
                                <img src="{{ book.image_url }}" alt=""
                                     style="height: 200px; ">
                            </a>
                        </div>
                        {% if loop.index0 % 4 == 3 or loop.last %}
                            </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    <div style="margin-bottom: 50px">
                        <h4 id="section-2" class="title">收货地址</h4>
                        {% if user.recipients %}
                            {% for recipient in user.recipients %}
                                <fieldset disabled>
                                    <div class="form-group">
                                        <label>收货人</label>
                                        <input type="text" class="form-control" value="{{ recipient.name }}">
                                    </div>
                                    <div class="form-group">
                                        <label>电话号码</label>
                                        <input type="text" class="form-control" value="{{ recipient.phone }}">
                                    </div>
                                    <div class="form-group">
                                        <label>详细地址</label>
                                        <input type="text" class="form-control" value="{{ recipient.address }}">
                                    </div>
                                </fieldset>
                                <button class="btn update_address" style="margin-bottom: 50px" data-toggle="modal"
                                        data-target="#modal-address"
                                        data-id="{{ recipient.id }}" onclick="opt_address(this)">修改地址
                                </button>
                            {% endfor %}
                        {% endif %}
                        <a class="btn btn-primary center-block" href="#" data-toggle="modal"
                           data-target="#modal-address"
                           onclick="opt_address(this)">
                            添加地址</a>
                    </div>
                {% endif %}
                <div style="margin-bottom: 50px">
                    <h4 id="section-3" class="title">修改密码</h4>
                    {{ render_form(pwd_form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block book_madol %}
    {#    模态框 #}
    <div class="modal fade modal-book-detail" tabindex="-1" role="dialog" id="modal-comment-book"
         aria-labelledby="exampleModalLabel">
    </div>
    {#    模态框 #}
    <div class="modal fade modal-book-detail" tabindex="-1" role="dialog" id="modal-address"
         aria-labelledby="exampleModalLabel">
        <div class="modal-dialog book_detail_dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form id="addressForm" action="{{ url_for('save_up_address') }}" method="post">
                        <div class="form-group">
                            <label>收货人</label>
                            <input id="adr_name" name="name" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>电话号码</label>
                            <input id="adr_phone" name="phone" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>详细地址</label>
                            <input id="adr_address" name="address" type="text" class="form-control">
                        </div>
                        <input id="adr_id" name="id" type="hidden">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submit_address();">
                        确定
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}